<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

  
    <div class="row">
      <div class="col-xl-3 col-sm-6 col-12">
        <div style="width: 87vh;" class="card">
          <div class="card-body">
            <div class="dash-widget-header">
              <span class="dash-widget-icon bg-1">
                <i class="fas fa-dollar-sign"></i>
              </span>
              <div class="dash-count">
                <div style="color: #f2f2f2;" class="dash-title">累计项目</div>
                <div style="color: #f2f2f2;" class="dash-counts">
                  <p>{{pageData.projectNumbers}}</p>
                </div>
              </div>
            </div>
            <div class="progress progress-sm mt-3">
              <div class="progress-bar bg-5" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <!-- <p class="text-muted mt-3 mb-0"><span  class="text-danger mr-1"><i class="fas fa-arrow-down mr-1"></i>1.15%</span> <span style="color: #f2f2f2;">同比上月</span></p> -->
          </div>
        </div>
      </div>
      
      <div style="margin-left: -1.5vh;" class="col-xl-3 col-sm-6 col-12">
        <div style="width: 85vh;" class="card">
          <div class="card-body">
            <div class="dash-widget-header">
              <span class="dash-widget-icon bg-4">
                <i class="far fa-file"></i>
              </span> 
              <div class="dash-count">
                <div style="color: #f2f2f2;" class="dash-title">累计规划设计方案</div>
                <div style="color: #f2f2f2;" class="dash-counts">
                  <p>{{pageData.planSchemeNumbers}}</p>
                </div>
              </div>
            </div>
            <div class="progress progress-sm mt-3">
              <div class="progress-bar bg-8" role="progressbar" style="width: 45%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <!-- <p class="text-muted mt-3 mb-0"><span class="text-danger mr-1"><i class="fas fa-arrow-down mr-1"></i>8.68%</span> <span style="color: #f2f2f2;">同比上月</span></p> -->
          </div>
        </div>
      </div>
    </div>
  
    <div style="" class="box1">
              
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">经济性分析项目占比统计</div>
      </div> 

      <div id="pieCharts1" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>

    <div class="box2">
              
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">规划设计项目占比统计</div>
      </div> 

      <div id="pieCharts2" style="width: 98%;height: 98%;margin: 0 auto;"></div>
    </div>
  
    <div style="" class="box3">
                    
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">规划设计方案占比统计</div>
      </div> 

      <div id="pieCharts3" style="width: 98%;height: 98%;margin: -34px auto;"></div>
    </div>

    <div class="box4">
                    
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">能源设备统计</div>
      </div> 

      <div style="width: 100%;height: 98%;display: inline-flex;">
        <div style="width: 20%;height: 90%;margin-left: 1vh;">

          <div class="col-xl-3 col-sm-6 col-12">
            <div class="card">
              <div style="padding: 1.4rem;" class="card-body">
                <div class="dash-widget-header">
                  <span class="dash-widget-icon bg-2">
                    <i class="fas fa-users"></i>
                  </span>
                  <div class="dash-count">
                    <div style="color: #f2f2f2;" class="dash-title">能源设备种类</div>
                    <div style="color: #f2f2f2;" class="dash-counts">
                      <p>{{pageData.energyEquipmentType}}</p>
                    </div>
                  </div>
                </div>
                <div class="progress progress-sm mt-3">
                  <div class="progress-bar bg-6" role="progressbar" style="width: 65%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- <p class="text-muted mt-3 mb-0"><span class="text-success mr-1"><i class="fas fa-arrow-up mr-1"></i>2.37%</span> <span style="color: #f2f2f2;">同比上月</span></p> -->
              </div>
            </div>
          </div>
          <div style="margin-top: -2.5vh;" class="col-xl-3 col-sm-6 col-12">
            <div class="card">
              <div style="padding: 1.4rem;" class="card-body">
                <div class="dash-widget-header">
                  <span class="dash-widget-icon bg-3">
                    <i class="fas fa-file-alt"></i>
                  </span>
                  <div class="dash-count">
                    <div style="color: #f2f2f2;" class="dash-title">能源设备个数</div>
                    <div style="color: #f2f2f2;" class="dash-counts">
                      <p>{{pageData.energyEquipmentNumbers}}</p>
                    </div>
                  </div>
                </div>
                <div class="progress progress-sm mt-3">
                  <div class="progress-bar bg-7" role="progressbar" style="width: 85%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <!-- <p class="text-muted mt-3 mb-0"><span class="text-success mr-1"><i class="fas fa-arrow-up mr-1"></i>3.77%</span> <span style="color: #f2f2f2;">同比上月</span></p> -->
              </div>
            </div>
          </div>
          
        </div>
        <div id="barCharts" style="width: 79%;height: 98%;margin: 0 auto;"></div>
      </div>

    </div>
    
    

  </div>
  
</template>

<script>
import { registerTheme } from 'echarts';

import '../../assets/css/mainPage/all.min.css';
import '../../assets/css/mainPage/bootstrap.min.css';
import '../../assets/css/mainPage/style.css';


  export default {
    name: 'heLoadPage',
    data() {
      return {
        pageData:{
          projectNumbers:"-",
          planSchemeNumbers:"-",
          energyEquipmentType:"-",
          energyEquipmentNumbers:"-",
        }
      }
    },
    mounted: function() {
      this.queryMainPageData();
    },
    methods: {
      
      queryMainPageData : function(){
 
          let pieCharts1 = this.$echarts.init(document.getElementById('pieCharts1'));
          let pieCharts2 = this.$echarts.init(document.getElementById('pieCharts2'));
          let pieCharts3 = this.$echarts.init(document.getElementById('pieCharts3'));
          let barCharts = this.$echarts.init(document.getElementById('barCharts'));

          var vm = this;

          this.$http.post('/iepsapi/ea/mainPage/queryMainPageData').then((res) => {
            var result = res.data;
            if(result){
              vm.pageData = result.pageData;
              
              //vm.pageData.projectNumbers = "6";
              //vm.pageData.planSchemeNumbers = "38";
              //vm.pageData.energyEquipmentType = "23";
              //vm.pageData.energyEquipmentNumbers = "23";

              var pageData = result.pageData;
              var echartData = [
                {
                  value: pageData.hpNumbers,
                  name: " 制(储)氢",
                },
                {
                  value: pageData.htNumbers,
                  name: " 输氢",
                },
                {
                  value: pageData.huNumbers,
                  name: " 用氢",
                },
              ];

              var pieOption1 = this.getPieOption(echartData);

              echartData = [
                {
                  value: pageData.ewNumbers,
                  name: " 制(储)氢场景",
                },
                {
                  value: pageData.heNumbers,
                  name: " 氢能综合供能场景",
                },
                {
                  value: pageData.ieNumbers,
                  name: " 综合能源",
                },
                {
                  value: pageData.htpNumbers,
                  name: " 输氢场景",
                },
              ];
              var pieOption2 = this.getPieOption(echartData); 

              var data = [
                  { value: result.pageData.ewSchemeNumbers, name: '制(储)氢场景' },
                  { value: result.pageData.heSchemeNumbers, name: '氢能综合供能场景' },
                  { value: "3",  name: "输氢场景",
                },
              ]

              var pieOption3 = this.getPieOption2(data); 

              pieCharts1.clear(); 
              pieCharts2.clear();  
              pieCharts3.clear();  
              barCharts.clear();  

              pieCharts1.setOption(pieOption1); 
              pieCharts2.setOption(pieOption2);  
              pieCharts3.setOption(pieOption3);  

              var deviceArray = pageData.deviceArray;

              var barOption = this.getBarOption();
              barOption.series[0].data = deviceArray;
              barCharts.setOption(barOption);  

              window.onresize = function(){
                pieCharts1.resize(); 
                pieCharts2.resize();  
                pieCharts3.resize();  
                barCharts.resize();  

              }



            }
          }).catch((error) => {
            console.log(error);
          });


      },

      getPieOption2 : function(pieData){

        var data = pieData;

        var option = {
     
            tooltip: {
              
                trigger: 'item'
            },
            color:["#91CC75","#5470C6"],
            legend: {
              bottom: "2%",
              left: '19%',
              orient: 'vertical',
              data: data,
              icon: 'circle',
              itemWith: 8,
              itemHeight: 8,
              itemGap: 10,
              formatter(name) {
                const item = data.filter((item) => item.name === name)[0];
                return `{name|${name}}{value|方案数量： ${item.value + '}'}{name2|}`;
              },
              textStyle: {
                rich: {
                    name: {
                      color: '#f2f2f2',
                      fontSize: 14,
                      width: 150,
                      fontWeight: 600
                    },
                    name2: {
                      color: '#f2f2f2',
                      fontSize: 14,
                      width: 200,
                      fontWeight: 600
                    },
                    value: {
                      color: '#f2f2f2',
                      fontSize: 14,
                      width: 170,
                      fontWeight: 600
                    }
                },
              },
          },
            series: [
                {
                    name: '方案数量',
                    type: 'pie',
                    radius: '50%',
                    // 添加3D效果
                    itemStyle: {
                        shadowBlur: 30,
                        shadowOffsetX: 5,
                        shadowOffsetY: 5,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 40,
                            shadowOffsetX: 10,
                            shadowOffsetY: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data:data,
                     itemStyle: {
                      normal: {
                          borderType: 'solid',
                          borderColor: '#1E3477',
                          borderRadius: '80%',
                          borderWidth: 2, // 饼图间隔距离
                          position: 'inside',
                          label: {
                              padding: [0, 0],
                              show: true,
                              //环形数值显示样式格式
                              formatter: `{a|{c}}\n{hr|}\n{a|{d}%}`,
                              rich: {
                                  a: {
                                      fontSize: 14,
                                      padding: [3, 0, 5, 0],
                                      color: 'rgba(20, 233, 250, 1)'
                                  },
                                  hr: {
                                      borderColor: '#fff',
                                      width: '100%',
                                      borderWidth: 0.8,
                                      height: 0,
                                  },
                              }
                          }, 
                

                      },

                  },
                    // 设置3D效果的配置
                    roseType: 'angle', // 设定为饼图
                    animationType: 'scale', // 使用缩放动画
                    animationEasing: 'elastic' // 采用弹性动画
                }
            ]
        };

        return option;

      },

      getPieOption(echartData){
        var fontSize = 10;
        var colorListLabel = [
          "rgb(148, 248, 199)",
          "rgb(204, 218, 245)",
          "rgb(173, 219, 246)",
          "rgb(250, 231, 177)",
        ];
        var colorList = [
          "rgba(0, 138, 255, 1)",
          "rgba(255, 155, 48, 1)",
          "rgba(0, 180, 76, 1)",
          "rgba(151, 101, 254, 1)",
        ];
        var colorLabelTitle = [
          "rgb(121, 240, 182)",
          "rgb(186, 206, 246)",
          "rgb(141, 204, 241)",
          "rgb(250, 220, 135)",
        ];


        //把echartData数据遍历实现不同指线文字背景色
        var seriesData = echartData.map((item, index) => {
          return {
            ...item,
            // value: Math.sqrt(item.value).toFixed(0) * 100,
            actValue: item.value,
            label: {
              show: true,
              position: "outside",
              borderRadius: 5,
              padding: [10, -10, 3, -3],
              color: colorList[index],
              textStyle: {
                fontSize: 15,
              },
              formatter:
                "{white|{b}}\n{yellow|项目数量：     {c} }\n{three| 占比：       {d}%} ",
              rich: {
                test: {},
                white: {
                  color: "#000",
                  align: "left",
                  fontSize: fontSize * 1.4,
                  backgroundColor: colorLabelTitle[index],
                  width: 120,
                  borderRadius: [4, 4, 0, 0],
                  padding: [8, 4],
                },
                yellow: {
                  color: "#666666",
                  align: "left",
                  fontSize: fontSize * 1.4,
                  padding: [6, 4],
                  backgroundColor: colorListLabel[index],
                  width: 120,
                  borderRadius: [0, 0, 0, 0],
                },
                three: {
                  color: "#666666",
                  align: "left",
                  fontSize: fontSize * 1.4,
                  padding: [6, 4],
                  backgroundColor: colorListLabel[index],
                  width: 120,
                  borderRadius: [0, 0, 4, 4],
                },
              },
            },
          };
        });

        var option = {
          title: {
            show: true,
            text: '',
            itemGap: 0, //主副标题之间的距离
            x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: 'center',
            subtext: '项目总数：3',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontSize: 18,
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
              fontSize: 12,
              color: '#17A6FA'
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{b}<br/>{c} ({d}%)",
            textStyle: {
              fontSize: fontSize * 1.6,
            },
          },
          series: [
            {
              name: "pie",
              type: "pie",
              radius: ["30%", "50%"],
              hoverAnimation: false,
              color: ["#14cf75", "#73a0fa", "#17a6fa", "#fcc529"],
              itemStyle: {
                //饼图之间颜色
                normal: {
                  borderColor: "#fff",
                  borderWidth: 4,
                },
              },
              labelLine: {
                length: 10,//视觉引导线第一段的长度
                length2: 70,//视觉引导线第二段的长度
              },
              data: seriesData,
            },
          ],
        };

        return option;

      },

      getBarOption:function(){
        
        var barOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },
          legend: {
            icon: 'circle',
            orient: 'horizontal',
            itemGap: 40,
            itemWidth: 14,
            itemHeight: 14,
            top: "0%",
            textStyle: {
              fontSize: 14,
              color: '#f2f2f2',
              fontWeight: 400,
               
            },
            data: ['设备型号数量'],
          },
          color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
          grid: {
            top: '10%',
            left: '3%',
            right: '5%',
            bottom: '25%',
            containLabel: false,
          },
          xAxis: {
            name: '设备种类', 
            nameTextStyle: {
              color: '#f2f2f2',
              padding: [0, 50, -25, 0]
            },
            axisLine: {       // 坐标轴 轴线
              show: true,  // 是否显示
              // symbol: ['none', 'arrow'],  // 是否显示轴线箭头
              symbolSize: [6, 6], // 箭头大小
              symbolOffset: [0, 7],  // 箭头位置
              lineStyle: {
                  color: '#ccc',
                  width: 1,
                  type: 'solid'
              }
            },
            type: 'category',
            data: ['光伏/热','光伏','风机','锂电池','铅酸电池','ALK电解槽','PEM电解槽','AEM电解槽','固态储氢','气态储氢','液态储氢','燃料电池','集热器','地源热泵','空气源热泵','水源热泵','固态蓄热','水蓄热','吸收式制冷','水蓄冷','冰蓄冷'],
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: '#f2f2f2'
            },
                    
            axisLabel: {
              rotate: 45,
              interval: 0,
              textStyle: {
                color: '#f2f2f2',
                fontSize: '12',
                fontWeight: 'normal',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            splitLine: {
              lineStyle: {
                color: '#f2f2f2',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
          },
          series: [
            {
              name: '设备型号数量',
              type: 'bar', 
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              itemStyle: {
                borderRadius: 10,
                color: {
                    type: 'linear',
                    colorStops: [
                      { offset: 0, color: '#347CDD' }, // 0% 处的颜色
                      { offset: 1, color: '#56fb93' } // 100% 处的颜色
                    ],
                    global: false // 缺省为 false
                }
              },
      
              barWidth: 40,
              emphasis: {
                focus: 'series',
              },
              data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,1, 1, 1, 1, 1, 1,1, 1,1, 1,1],
            } 
          ],
        };


        return barOption;

      }

    }
  }
</script>



<style>

.el-table__empty-text {
    line-height: 60px;
    width: 50%;
    color: #ffffff;
}

.el-table__empty-block {
    background: #14224e;
    min-height: 60px;
    text-align: center;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* 覆盖默认滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 设置滚动条轨道的颜色 */
::-webkit-scrollbar-track {
  background-color: #17057e;
}

/* 设置滚动条滑块的颜色 */
::-webkit-scrollbar-thumb {
  background-color: #47b8ec;
}

/* 设置滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #47b8ec;
}


.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 

.col-xl-3 {
    -ms-flex: 0 0 25%;
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    max-width: 100%;
}

.titleDiv {
   width: 100%;
   margin: 0.5vh;
   height: 2.5vh; 
   font-weight: bold; 
   -webkit-box-shadow: none;
   box-shadow: none;
   font-weight: 700;
   font-style: normal;
   font-size: 2vh;
   color: #f2f2f2;
   text-align: left;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   position: relative;
 }
 .barColorBox {
   height: 2.5vh;
   width: 0.7vh;
   border-radius: 1px;
   display: inline-block;
   vertical-align: text-bottom;
   border: none;
   box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
   background-color: #FAFAFA;
   background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
   background-image: -o-linear-gradient(top,#17b4db,#07c968);
   background-image: -ms-linear-gradient(top,#17b4db,#07c968);
   background-image: linear-gradient(top,#17b4db,#07c968);
   background-repeat: repeat-x;
 }

 .titlefont {
   flex: 1;
   height: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   font-size: 1.8vh;
    padding-left: 5px;
    margin-top: 0vh;
 }


  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{  
    width: 87%;
    height: 7%;
    position: absolute;
    left: 25vh;
    top: 11vh;
    margin: auto;
    border-radius: 5px;
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }


  .box1{  
    width: 30.4%;
    height: 35%;
    position: absolute;
    left: 25vh;
    top: 25.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 30.4%;
    height: 35%;
    position: absolute;
    left: 88vh;
    top: 25.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }
  
  .box3{ 
    width: 24.35%;
    height: 35%;
    position: absolute;
    left: 151vh;
    top: 25.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box4{ 
    width: 86.9%;
    height: 35%;
    position: absolute;
    left: 25vh;
    top: 62vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
